<template>
  <view class="recruit-loadmore">
    <text v-if="loading" class="recruit-loadmore__loading">加载中...</text>
    <text v-else-if="hasMore" class="recruit-loadmore__text" @click="$emit('loadMore')">加载更多</text>
    <text v-else class="recruit-loadmore__end">{{ endText }}</text>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

defineEmits(['loadMore']);

defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  hasMore: {
    type: Boolean,
    default: true
  },
  endText: {
    type: String,
    default: '已经到底啦~'
  }
});
</script>

<style lang="scss" scoped>
.recruit-loadmore {
  text-align: center;
  padding: 16px 0;
  color: #999;
  font-size: 14px;
  
  &__loading,
  &__text,
  &__end {
    display: inline-block;
    line-height: 1.5;
  }
  
  &__text {
    color: #1890ff;
    padding: 6px 16px;
    background-color: rgba(24, 144, 255, 0.1);
    border-radius: 16px;
  }
  
  &__end {
    color: #999;
    font-size: 13px;
  }
}
</style>
